<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未知宽高元素水平垂直居中</title>
    <!-- 使用display:flex 弹性布局 -->
</head>
<style>
.parent4{
    display: flex;
    justify-content: center;
    /* 交叉轴上的对其方式 */
    align-items: center;
    /* 水平轴上的对其方式  */
    width: 300px;
    height:300px;
    background: #FD0C70;
}
.parent4 .child{
    /* color:#fff; */
    width:50px;
    height:50px;
    background-color: blue
}
</style>
<body> <div class="parent4">
        <div class="child">hello world-4</div>
        <div class="child">hello world-2</div>
    </div>
</body>
</html>